<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>spirit</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />

</head>

<body>
    <!-- 导航条 -->
    <header id="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand wow bounceInLeft" href="#">Spirit8</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#banner" class="wow bounceInRight" data-wow-delay="0.1s">home</a></li>
                        <li><a href="#about" class="wow bounceInRight" data-wow-delay="0.2s">about</a></li>
                        <li><a href="#team" class="wow bounceInRight" data-wow-delay="0.3s">services</a></li>
                        <li><a href="#work" class="wow bounceInRight" data-wow-delay="0.4s">portfolio</a></li>
                        <li><a href="#testimonials" class="wow bounceInRight" data-wow-delay="0.5s">testimonials</a></li>
                        <li><a href="#contact" class="wow bounceInRight" data-wow-delay="0.6s">contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner -->
    <div id="banner">
        <video src="./assets/images/banner.mp4" autoplay muted loop id="background"></video>
        <div class="content">
            <h3 class="wow bounceIn" data-wow-delay="0.2s">welcome on <span>spirit8</span></h3>
            <div class="desc wow bounceIn" data-wow-delay="0.4s">
                <p>We are a digital agency with <span>years of experience</span> and with <span>extraordinary
                        people</span></p>
            </div>
            <div class="more">
                <a href="#contact" class="wow bounceIn" data-wow-delay="0.6s">↓</a>
            </div>
        </div>
    </div>

    <!-- about -->
    <div id="about">
        <div class="container">
            <div class="img wow fadeInRight">
                <img src="./assets/images/about-background.png" alt="">
            </div>
            <div class="content">
                <h2 class="wow bounceIn" data-wow-delay="0.2s">About us</h2>
                <p class="wow bounceIn" data-wow-delay="0.4s"><span>Some</span> words <span>about us</span></p>
                <div class="desc wow bounceIn" data-wow-delay="0.6s">We love building and rebuilding brands through our
                    specific skills.
                    Using colour, fonts, and illustration, we brand companies in a way they will never forget.
                </div>
                <ul class="wow bounceIn" data-wow-delay="0.8s">
                    <li>Mission - <span>We deliver uniqueness and quality</span></li>
                    <li>Skills - <span>Delivering fast and excellent results</span></li>
                    <li>Clients - <span>Satisfied clients thanks to our experience</span></li>
                </ul>
                <div class="more wow bounceIn" data-wow-delay="1s">Browse our work</div>
            </div>
        </div>
    </div>

    <!-- team -->
    <div id="team">
        <div class="container">
            <div class="img wow bounceIn">
                <h2>meet <span>our team</span></h2>
                <img src="./assets/images/title-background.png" alt="">
            </div>

            <div class="box">
                <div class="item ">
                    <div class="img wow bounceIn" data-wow-delay=".1s">
                        <img src="./assets/images/cover.png" alt="">
                    </div>
                    <div class="content wow bounceInLeft" data-wow-delay=".2s">
                        <h2>Jason Statham</h2>
                        <p>Knife designer</p>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".3s">
                        <img src="./assets/images/cover.png" alt="">
                    </div>
                    <div class="content wow bounceInLeft" data-wow-delay=".4s">
                        <h2>Van Damme</h2>
                        <p>No English</p>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".5s">
                        <img src="./assets/images/cover.png" alt="">
                    </div>
                    <div class="content wow bounceInLeft" data-wow-delay=".6s">
                        <h2>Sylvester Stallone</h2>
                        <p>Cigar Lover</p>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".7s">
                        <img src="./assets/images/cover.png" alt="">
                    </div>
                    <div class="content wow bounceInLeft" data-wow-delay=".8s">
                        <h2>Jet Li</h2>
                        <p>I need more money</p>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>

            <div class="more wow bounceIn" data-wow-delay=".9s">
                <label></label><label></label><label></label>
            </div>

        </div>
    </div>

    <!-- services -->
    <div id="services">
        <div class="container">
            <div class="titles wow bounceIn">
                take a look at <span>out services</span>
            </div>
            <div class="introduce wow bounceIn">
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes
                from a line in section 1.10.32.
            </div>
            <div class="box wow bounceIn">
                <div class="item">
                    <div class="img">
                        <img src="./assets/images/1.png" alt="">
                    </div>
                    <div class="content">
                        <h2>Web design</h2>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="img">
                        <img src="./assets/images/2.png" alt="">
                    </div>
                    <div class="content">
                        <h2>Mobile apps</h2>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="img">
                        <img src="./assets/images/3.png" alt="">
                    </div>
                    <div class="content">
                        <h2>PHOTOGRAPHY</h2>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.</div>
                    </div>
                </div>
                <div class="item">
                    <div class="img">
                        <img src="./assets/images/4.png" alt="">
                    </div>
                    <div class="content">
                        <h2>marketing</h2>
                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- clients -->
    <div id="clients">
        <div class="container">
            <div class="titles wow bounceIn">
                some of <span>our clients</span>
            </div>
            <div class="img wow bounceIn" data-wow-delay=".1s">
                <img src="./assets/images/logos.png" alt="">
            </div>

            <div class="more wow bounceIn" data-wow-delay=".2s">
                <label></label><label></label><label></label>
            </div>
        </div>
    </div>

    <!-- work -->
    <div id="work">
        <div class="container">
            <div class="titles wow bounceIn">
                take a look at <span>out works</span>
            </div>
            <div class="desc wow bounceIn" >
                Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good
                and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
                during
                the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in
                section
                1.10.32.
            </div>

            <div class="menu">
                <div class="left wow bounceInLeft" >Filter by type</div>
                <div class="right wow bounceInRight" >
                    <a href="javasrcipt:void(0)">AII</a>
                    <a href="javasrcipt:void(0)">Web design</a>
                    <a href="javasrcipt:void(0)">Mobile design</a>
                    <a href="javasrcipt:void(0)">Photograpy</a>
                </div>
            </div>

            <div class="list">
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 77.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 77.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 77.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 77.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 82.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 82.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 82.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="img wow bounceIn" data-wow-delay=".2s">
                        <img src="./assets/images/Layer 82.png" alt="">
                        <div class="trend">
                            <div class="content">
                                <h3>Trend and fashion</h3>
                                <p>Website design</p>
                                <p class="add">＋</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- testimonials -->
    <div id="testimonials">
        <div class="container">
            <div class="titles wow bounceIn" data-wow-delay=".1s">
                <span>our clients'</span> testimonials
            </div>
            <div class="content">
                <div class="desc wow bounceIn" data-wow-delay=".2s">
                    This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line
                    of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                </div>
                <div class="inc wow bounceIn" data-wow-delay=".3s">
                    Dean Martin, <span>CEO Acme Inc.</span>
                </div>

                <div class="more">
                    <label></label><label></label><label></label>
                </div>
            </div>
        </div>
    </div>

    <!-- contact -->
    <div id="contact">
        <div class="container">
            <div class="box">
                <div class="titles wow fadeIn">
                    feel free to <span>contact us</span>
                </div>
                <div class="content wow fadeIn" data-wow-delay=".1s">
                    Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
                    of
                    Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                    popular during the Renaissance.
                </div>

                <div class="forms">
                    <div class="one">
                        <div class="left wow fadeIn" data-wow-delay=".2s">
                            <div>Name <span>*</span></div>
                            <div>
                                <input type="text">
                            </div>
                        </div>
                        <div class="right wow fadeIn" data-wow-delay=".3s">
                            <div>Email address <span>*</span></div>
                            <div>
                                <input type="text">
                            </div>
                        </div>
                    </div>
                    <div class="tow wow fadeIn" data-wow-delay=".4s">
                        <div>Message <span>*</span></div>
                        <div>
                            <textarea  rows="8"></textarea>
                        </div>
                    </div>
                </div>

                <div class="more wow fadeIn" data-wow-delay=".5s">
                    SEND
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
     <div id="footer">
         <div class="container">
            <div class="desc">
                ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span>
            </div>
            <div class="mune">
                <a href="">
                    <img src="./assets/images/footer1.png" alt="">
                </a>
                <a href="">
                    <img src="./assets/images/推特.png" alt="">
                </a>
                <a href="">
                    <img src="./assets/images/谷歌.png" alt="">
                </a>
                <a href="">
                    <img src="./assets/images/in.png" alt="">
                </a>
                <a href="">
                    <img src="./assets/images/篮球.png" alt="">
                </a>
            </div>
         </div>
     </div>

     <!-- 返回顶部 -->
      <div id="back">
        <a href="#banner" id="gotop">
            <img src="./assets/images/fanhuitoubu.svg" alt="">
        </a>
      </div>

</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.repeat.js"></script>

<script>
    //获取id为background的元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 10

    //实例化wow.js
    new WOW().init()


    // 滚动监听
    // a href == id 
    //锚点跳转滑动效果  
    $('#bs-example-navbar-collapse-1 a[href],#banner a[href],#back a[href]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
                return false;
            }
        }
    });

    //给页面绑定一个滚动条事件
    $(document).scroll(function () {
        //获取滚动条滚动长度大小
        var distance = $(this).scrollTop()

        //当滚动条滚动的长度大于10
        if (distance > 10) {
            //显示返回顶部
            $("#gotop").css({ zIndex: 99998, opacity: 1 });
            $("#header").css({ backgroundColor: '#111111', paddingBottom: 0 });
        } else {
            //隐藏返回顶部
            $("#gotop").css({ zIndex: -99998, opacity: 0 });
            $("#header").css({ backgroundColor: 'transparent', paddingBottom: '1em' });
        }
    })
</script>